<template>
  <!--创建一个echarts的容器-->
  <div ref="chart" :style="{width: width, height: height}" class="bar-echart"></div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/views/dashboard/mixins/resize'

require('echarts/theme/macarons')
export default {
  name: 'BarEchart',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: { // 高度
      type: String,
      default: '320px'
    },
    option: {
      type: Object,
      default: function () {
        return {}
      }
    },
    seriesData: { // 需要显示的数据
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    comp_option() {
      let obj = {
        legend: {
          right: 30,
          top: 5,
          icon: 'roundRect', // 图例形状{'roundRect': 默认圆角矩形, 'circle': 圆形}
          itemHeight: 16, // 图例高
          itemWidth: 16, // 图例宽
          // 图例文本样式
          textStyle: {
            fontSize: 14,
          },
          type: 'plain', // 类型{'plain': 普通, 'scroll': 可滚动}
        },
        xAxis: [{
          type: 'category',
          // boundaryGap: true ,
          // boundaryGap: false, // 是否断点连线
          axisLine: {
            show: false,  // 这里的show用于设置是否显示y轴那一条线 默认为true
          },
          axisLabel: {
            color: '#333333',
            fontSize: 14,
            interval: 0, // 显示间隔，0为强制显示所有
          },
          axisTick: {
            show: false,  // 是否显示刻度线 默认为true
            // alignWithLabel: true
          },
          // nameGap: 20
        }],
        yAxis: [
          {
            type: 'value',
            nameTextStyle: {
              fontSize: 14,
              align: 'middle',
            },
            nameLocation: 'end', // 位置在顶部
            nameGap: 30, // 与y轴距离
            nameRotate: 0, // 角度
            min: 0,
            axisLabel: {
              margin: 20,
              show: true,
              interval: 1,
              // formatter: '{value}%'
            },
            axisLine: {
              show: false,  // 这里的show用于设置是否显示y轴那一条线 默认为true
            },
            axisTick: {
              show: false,  // 是否显示刻度线 默认为true
              alignWithLabel: true
            },
            splitLine: {    // 网格线
              lineStyle: {
                type: 'dashed'    // 设置网格线类型 dotted：虚线   solid:实线
              },
              show: true // 隐藏或显示
            },
          },
        ],
        color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
        // color: ['#d223e7', '#4962FC', '#18D070', '#3F77FE', '#12ED93', '#02CBF9', '#3FD0F9', '#f376e0', '#4962FC', '#189CBF', '#768BFF', '#01C2F9'],
        grid: {
          top: 40,
          bottom: 40,
        },
        tooltip: {
          // 触发指示器
          axisPointer: {
            type: 'shadow', // 类型{'line': 默认直线, 'shadow': 阴影, 'none': 无}
          },
          trigger: 'axis', // 触发方式{'item': 默认柱子本身, 'axis': 柱子所在轴位置, 'none': 不触发}
        },
        series: this.seriesData || []
      }
      this.mergeOption(obj, this.option)
      return obj
    }
  },
  watch: {
    seriesData: {
      deep: true,
      handler(val) {
        this.setOption(val)
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    // 绘制图表
    this.init()
    this.setOption(this.seriesData)
    this.chart.on('click', (params) => {
      this.$emit('click', params)
    })
    this.chart.getZr().on('click', (params) => {
      this.$emit('zrClick', params)
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    init(beforeFn = function () {
    }) {
      let finalOptions = beforeFn.call(this, this.comp_option) || this.comp_option
      this.chart.setOption(finalOptions)
    },
    setOption(data) {
      if (!data) return
      let options = {}
      options = {
        ...this.comp_option,
        series: data
      }
      this.chart.setOption(options)
    },
    mergeOption(defOption, newOption) {
      for (const [k, v] of Object.entries(newOption)) {
        if (Reflect.has(defOption, k)) {
          let type = Object.prototype.toString.call(v)
          type = type.split(' ')[1].split(']')[0]
          switch (type) {
            case 'Object':
              let defType = Object.prototype.toString.call(defOption[k])
              defType = defType.split(' ')[1].split(']')[0]
              if (defType === 'Object') {
                this.mergeOption(defOption[k], v)
              } else {
                defOption[k] = v
              }
              break
            default:
              defOption[k] = v
              break
          }
        } else {
          defOption[k] = v
        }
      }
    },
    getDataURL() {
      return this.chart.getDataURL()
    }
  },
};
</script>

<style lang="scss" scoped>
</style>
